import React, { Component } from "react";
import PropTypes from "prop-types";
import autobind from "autobind-decorator";
import GroupHeader from "./groupHeader";
import Box from "../../components/Box/box";

// utils
import navigate from "../../utils/navigation.js";
import { get } from "../../utils/db.js";

const BoxItem = Box.Item;

export default class Holiday extends Component {
  constructor(props) {
    super(props);
  }

  @autobind
  onLink() {
    window._rlog(`_growth_to_holiday`);
    const { userId, isSelf } = this.props;
    navigate({
      system: "holiday",
      corpId: get("corpId"),
      userId,
      isSelf
    });
  }

  renderHolidays(holidays) {
    let fitHolidays = holidays;
    const overLimit = fitHolidays.length > 8;
    if (overLimit) {
      fitHolidays = fitHolidays.slice(0, 7);
    }
    const holidayElems = fitHolidays.map(holiday => (
      <BoxItem
        key={holiday.leaveCode}
        text={holiday.count}
        suffix={holiday.viewUnit}
        linkText={holiday.name}
        ceiling={999}
      />
    ));
    if (overLimit) {
      holidayElems.push(<BoxItem
        key="viewMore"
        className="viewMoreBox"
        linkText={<p className="viewMore">查看<br />更多</p>}
        ceiling={999}
      />);
    }
    return (
      <Box cols={4} lineCamp>{holidayElems}</Box>
    );
  }

  render() {
    const holidays = this.props.holidays || [];
    return (
      <div className="growth-bonus waterMark" onClick={this.onLink}>
        <GroupHeader
          title={`当前剩余假期`}
          color="green"
          onClick={() => {}}
          icon={
            <img
              className="growth-profile-icon"
              src="https://gw.alicdn.com/tfs/TB1HL8rcLBNTKJjy0FdXXcPpVXa-80-80.png"
            />
          }
        />

        {holidays.length !== 0 ? this.renderHolidays(holidays) : (
          <div className="growth-holiday-empty">
            {/* <img
              className="growth-holiday-empty-pic"
              src="https://gw.alicdn.com/tfs/TB1dpM9gWagSKJjy0FaXXb0dpXa-286-234.png"
            /> */}
            <div className="growth-holiday-empty-text">当前企业未设置假期余额</div>
          </div>
        )}
      </div>
    );
  }
}

Holiday.propTypes = {
  holidays: PropTypes.array,
  isSelf: PropTypes.bool,
  userId: PropTypes.string
};
